<!DOCTYPE html>
<html lang="en">
<head>
    <!--指定utf-8-->
    <meta charset="utf-8">
</head>
<body></body>
<!--myremove是自定义事件[注意此处只能全小写],相当于click,change那种事件-->
<div id="app">
    <myBook>
        <!--使用props接收title-->
        <my-book-title slot="my-book-title" :title="title"></my-book-title>
        <my-book-book-name slot="my-book-book-name" v-for="(item,index) in items"
                           :item="item" v-on:myremove="removeItem(index)" :key="index"
        ></my-book-book-name><!--自定义事件myremove,调用vm的removeItem()-->
    </myBook>
</div>
<!--导入JS文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>

    // 需要变动数据的地方 写slot标签
    Vue.component("myBook", {
        template:
            `<div>
                <!--name指定插槽的名字-->
                <solt name="my-book-title"></solt>
                <ul>
                    <solt name="my-book-book-name"></solt>
                </ul>
            </div>`,
    })
    Vue.component("my-book-title", {
        props: ["title"],
        template:
            `<div>{{title}}</div>`
    })
    Vue.component("my-book-book-name", {
        props:["item", "index"],
        template:
            /*只能绑定当前组件的方法*/
            `<li>{{index}}->{{item}}<button @click="myremove">删除</button>  </li>`,
        methods:{
            myremove: function (index){//需要想办法去调用vm的方法
                this.$emit("myremove",index)
            }
        }
    })

    var vm = new Vue({
        el: "#app",
        data: {
            title:"我的书籍(use slot)",
            items: ["Java", "Linux", "Go"],
        },
        methods: {
            // 可以被直接调用
            removeItem: function (index){
                this.items.splice(index, 1);
            }
        }
    });
</script>
